import React, { useState, useEffect } from 'react'
import { channel } from '../../api/channel'

export default function UseState () {
  const [count, setCount] = useState(24)
  const [name, setName] = useState('李华')
  const [data, setData] = useState([])
  const [position, setPosition] = useState({ x: 0, y: 0 })

  const change = e => {
    setName(e.target.value)
  }
  //写法一：只要模型发生改变，就会执行     几乎不使用
  // 副作用之一：更改dom
  //   useEffect(() => {
  //     document.title = count
  //   })
  /*   写法二：要写第二个参数(是一个数组，可以不写，也可以写1个或多个)  */
  useEffect(() => {
    document.title = count
  }, [count])
  // 写法三：第二个参数诗歌空数组，它自始至终只会执行一次
  //副作用二：发送请求
  const getData = async () => {
    const res = await channel()
    setData(res.data)
    console.log(res.data)
  }
  useEffect(() => {
    getData()
  }, [])
  //写法四   副作用三： 针对定时器或是事件监听的
  useEffect(() => {
    //清除定时器
    let timer = setTimeout(() => {
      console.log('执行了')
    }, 1500)
    // 监听事件
    const move = e => {
      console.log('--e--', e)
      setPosition({ x: e.clientX, y: e.clientY })
    }
    window.addEventListener('mousemove', move)
    // return 中的函数 相当与 componentWillUnmount
    return () => {
      // 清除定时器或是解除事件监听
      clearTimeout(timer)
      window.removeEventListener('mousemove', move)
    }
  }, [])
  return (
    <div>
      UseState
      <p>count is {count} </p>
      <p>
        <button onClick={() => setCount(count + 1)}>+1</button>
      </p>
      <p>
        <span>name is {name}</span>&nbsp;&nbsp;&nbsp;
        <input type='text' name='' value={name} onChange={change} />
      </p>
      <p>
        position is {position.x},{position.y}{' '}
      </p>
    </div>
  )
}
